<template>
  <div ref="imageWrapper">
    <a-card title="查询条件" class="search">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form-model ref="ruleForm" :model="queryParam" layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :span="20">
              <a-col :span="8">
                <a-form-model-item label="采集表名称">
                  <a-input v-model="queryParam.name" placeholder="请输入采集表名称" />
                </a-form-model-item>
              </a-col>
              <template v-if="toggleSearchStatus">
<!--                <a-col :span="7">
                  <a-form-item label="报告期类型">
                    <j-dict-select-tag
                      placeholder="请选择报告期类型"
                      v-model="queryParam.reportPeriod"
                      dictCode="template_report_type"
                    />
                  </a-form-item>
                </a-col>-->
                <a-col :span="7">
                  <a-form-item label="报表类型">
                    <a-select
                      v-model="queryParam.taskCategoryId"
                      style="width: 100%"
                      placeholder="请选择报表类型"
                      option-label-prop="label"
                    >
                      <template v-for="(item, index) in taskList">
                        <a-select-option :value="item.id || ''" :label="item.name" :key="item.id">
                          {{ item.name }}
                        </a-select-option>
                      </template>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-model-item label="填报表版本">
                    <a-input
                      addon-before="V"
                      type="Number"
                      :step="0.1"
                      :min="1"
                      v-model="queryParam.version"
                      placeholder="请输入填报表版本"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="发布日期">
                    <j-date
                      placeholder="请选择开始日期"
                      class="query-group-cust"
                      v-model="queryParam.createTime"
                    ></j-date>
                    <span class="query-group-split-cust"></span>
                    <j-date placeholder="请选择结束日期" class="query-group-cust" v-model="queryParam.endTime"></j-date>
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-model-item label="填报人">
                    <a-input v-model="queryParam.reporterName" placeholder="请输入填报人" />
                  </a-form-model-item>
                </a-col>
              </template>
            </a-col>
            <a-col :span="4">
              <span style="float: right; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" icon="search" class="yellow_search_btn" @click="searchQuery">查询</a-button>
                <a-button icon="reload" class="clear_btn" @click="searchReset">清除条件</a-button>
                <a-button icon="download" class="clear_btn" @click="exportAllExcel">批量下载</a-button>
                <a @click="handleToggleSearch">
                  <a-button class="clear_btn"> 高级搜索 <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/></a-button>
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </a-card>
    <a-card style="margin-top: 20px">
      <a-row>
        <a-col :lg="8" :xl="6" :xxl="5">
          <deptTreeSync :rootOpened="true" :multi="true" :checkable="false" :selected-keys="queryParam.selectedKeys" @onCheck="treeCheck"></deptTreeSync>
        </a-col>
        <a-col :lg="16" :xl="18" :xxl="19">
          <!--      <template slot="title"><span style="font-weight: bold">模板列表</span></template>-->
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            class="j-table-force-nowrap"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            @change="handleTableChange"
          >
            <template slot="status" slot-scope="text, record">
              <a-tag v-if="text == '0'" color="orange">
                未填报
              </a-tag>
              <a-tag v-if="text == '1'" color="blue">
                已填报
              </a-tag>
              <a-tag v-if="text == '2'" color="#2db7f5">
                已上报
              </a-tag>
              <a-tag v-if="text == '3'" color="#f50">
                已退回
              </a-tag>
              <a-tag v-if="text == '4'" color="green">
                已完成
              </a-tag>
              <a-tag v-if="text == '5'" color="red">
                已过期
              </a-tag>
            </template>
            <template slot="importStatus" slot-scope="text, record">
              <a-tag v-if="text == '0'" color="orange">
                未导入
              </a-tag>
              <a-tag v-if="text == '1'" color="green">
                已导入
              </a-tag>
            </template>
            <template slot="action" slot-scope="text, record">
              <a-button @click="OnPerview(record)" style="margin-left:5px">预览</a-button>
              <a-button
                v-if="record.status == '4' && record.importStatus == '0'"
                @click="importModalShow(record)"
                style="margin-left:5px"
                >导入</a-button
              >
              <span v-if="record.status == '2'">
                <a-popconfirm title="确定通过吗?" @confirm="() => audit(record, '4')">
                  <a-button style="margin: 0 5px">
                    通过
                  </a-button>
                </a-popconfirm>
                <a-popconfirm title="确定退回吗?" @confirm="() => audit(record, '3')">
                  <a-button type="danger">
                    退回
                  </a-button>
                </a-popconfirm>
              </span>
            </template>
          </a-table>
        </a-col>
      </a-row>

      <PerviewModal ref="perviewModal"></PerviewModal>

      <a-modal
        title="导入数据"
        :width="1000"
        :visible="importVisible"
        :confirm-loading="importLoading"
        @ok="importOk"
        @cancel="importCancel"
      >
        <a-spin :spinning="importLoading">
          <deptTreeSync :rootOpened="true" :multi="true" :checkable="false"
          :selected-keys="importData.deptIds" @onCheck="importTreeCheck"></deptTreeSync>
        </a-spin>
      </a-modal>
      <!--      <CheckOrganModal ref="departModal" @ok="updateQueryParam"></CheckOrganModal>-->
    </a-card>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, httpAction } from '@/api/manage'
import columns from './columns'
import PerviewModal from './perview/PerviewModal'
import deptTreeSync from '../rwxf/deptTreeSync/index.vue'

export default {
  components: {
    PerviewModal,
    deptTreeSync
  },
  mixins: [JeecgListMixin],
  data() {
    return {
      queryParam: {},
      superParam: {},
      url: {
        list: '/sjcj/dataCollectionTask/queryAuditlist',
        exportAllExcel: '/sjcj/dataCollectionTask/exportAllExcelByTaskId',
      },
      columns: columns(),
      importData: {},
      importVisible: false,
      importLoading: false,
      taskList: [],
    }
  },
  computed: {},
  created() {
    this.getTaskList()
  },
  watch: {},
  methods: {
    getTaskList() {
      getAction('/sjtb/dataCollectionTaskCategory/list').then((res) => {
        if (res.success && res.result.length > 0) {
          this.taskList = res.result
        } else {
          console.log(res)
        }
      })
    },
    audit(record, status) {
      httpAction(
        '/sjcj/dataCollectionTask/edit',
        {
          id: record.id,
          status: status
        },
        'put'
      ).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    OnPerview(record) {
      this.$refs.perviewModal.edit(record)
      this.$refs.perviewModal.title = `${record.name}（v ${record.version}）`
      this.$refs.perviewModal.disableSubmit = false
    },
    importModalShow(data) {
      let userDepartsInfo = JSON.parse(localStorage.getItem('pro__Login_UserDepartsInfo'));
      this.importData = data;
      this.$set(this.importData, 'deptIds', [userDepartsInfo.value.id]);
      this.$set(this.importData, 'deptName', userDepartsInfo.value.departName)
      this.importVisible = true;
    },
    importOk() {
      this.importVisible = true;
      this.importLoading = true;
      this.OnImport();
    },
    importCancel() {
      this.importVisible = false;
      this.importLoading = false;
      this.importData = {};
    },
    importTreeCheck(e, data) {
      this.$set(this.importData, 'deptIds', e)
      this.$set(this.importData, 'deptName', data.departName)
    },
    OnImport() {
      let params = {
        taskId: this.importData.id,
        uploadDept: this.importData.deptId,
        uploadBy: this.importData.reporter,
        uploadTime: this.importData.uploadTime,
        deptName: this.importData.deptName,
      };
      httpAction(
        this.importData.interfacePath,
        params,
        'POST'
      ).then(res => {
        this.importLoading = false;
        if (res.success) {
          this.$message.success(res.result)
          this.updateImportStatus(this.importData.id)
          this.importCancel()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    updateImportStatus(id) {
      httpAction('/sjcj/dataCollectionTask/importStatusEdit', { id: id, importStatus: 1 }, 'PUT').then(res => {
        if (res.success) {
          this.loadData()
        }
      })
    },
    // tree选择
    treeCheck(e) {
      this.$set(this.queryParam, 'selectedKeys', e);
      this.$set(this.queryParam, 'deptId', e.join(',') );
      this.loadData();
    },

    exportAllExcel(){
      if (this.selectedRowKeys.length == 0) {
        this.$message.error('请选择采集表')
        return
      }
      let id = this.selectionRows.map((item) => item.id).join(',')
      getAction(this.url.exportAllExcel,
        {
          ids: id
        }
      ).then((res) => {
        if (res.success) {
          let url = `${window._CONFIG['domianURL']}/sys/common/download` + res.result
          window.open(url, '_target')
          this.onClearSelected()
        } else {
          this.$message.error(res.message)
        }
      })
    },
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/tableTheme.less';

.search {
  background: url(/img/search_bg.204329a9.png) 100% 100%;
}
</style>
